import React, { useState } from 'react';
import { Table, Button, Input, Space } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import styles from './DistributionManagement.module.css';

const DistributionManagement = () => {
  const [searchText, setSearchText] = useState('');

  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      width: 80,
    },
    {
      title: '店铺名称',
      dataIndex: 'storeName',
      key: 'storeName',
    },
    {
      title: '所属区',
      dataIndex: 'district',
      key: 'district',
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '店长',
      dataIndex: 'manager',
      key: 'manager',
    },
    {
      title: '联系电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => handleEdit(record)}>编辑</a>
          <a onClick={() => handleView(record)}>查看</a>
          <a onClick={() => handleDelete(record)} className={styles.deleteLink}>删除</a>
        </Space>
      ),
    },
  ];

  const data = [
    {
      id: 1,
      storeName: '贺兰1店',
      district: '贺兰',
      address: '贺兰县恒阳广场3层301',
      manager: '张三',
      phone: '18998987878',
    },
    // ... 其他数据
  ];

  const handleAdd = () => {
    // 处理新增逻辑
    console.log('新增店铺');
  };

  const handleEdit = (record) => {
    console.log('编辑店铺', record);
  };

  const handleView = (record) => {
    console.log('查看店铺', record);
  };

  const handleDelete = (record) => {
    console.log('删除店铺', record);
  };

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <h2>当前位置: 分店管理</h2>
      </div>
      <div className={styles.toolbar}>
        <Button type="primary" onClick={handleAdd}>
          新增
        </Button>
        <Input
          placeholder="请输入店铺名称"
          prefix={<SearchOutlined />}
          onChange={(e) => setSearchText(e.target.value)}
          className={styles.searchInput}
        />
      </div>
      <Table
        columns={columns}
        dataSource={data}
        rowKey="id"
        pagination={{
          total: 243,
          pageSize: 10,
          showSizeChanger: true,
          showQuickJumper: true,
        }}
      />
    </div>
  );
};

export default DistributionManagement;
